<template>
    <div class="bodys">
        <SelectComponent @clickHandler="clickHandler" :data="liveCourseList"></SelectComponent>
        <div class="order-container container">
            <span @click="allSortHandler(1)" class="order-item" :class="{active: 1 === index}">{{1===index?'综合排序':'综合'}}</span>
            <span @click="countSortHandler(2)" class="order-item" :class="{active: 2 === index}">{{2===index?'销量由高到低': '销量'}}</span>
            <!--<span @click="commentSortHandler(3)" class="order-item" :class="{active: 3 === index}">{{3===index?'评价由高到低':'评价'}}</span>-->
            <span @click="viewSortHandler(4)" class="order-item" :class="{active: 4 === index}">{{4===index?'浏览量由高到低':'浏览量'}}</span>
            <!--<span >价格 <img src="./images/向下箭头.svg" style="width: 10px"></span>-->
            <el-dropdown class="order-item price">
                  <span class="el-dropdown-link" style="font-size: initial">
                    价格<el-icon class="el-icon--right"><arrow-down /></el-icon>
                  </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item><span @click="clickVideoCoursePriceDesc">价格由高到低</span></el-dropdown-item>
                        <el-dropdown-item><span @click="clickVideoCourseAsc">价格由低到高</span></el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <span @click="timeSortHandler(6)" class="order-item" :class="{active: 6 === index}">{{6===index?'发布时间由近及远':'发布时间'}}</span>
        </div>
        <!--starttime  item.moreBackup.startDate/endDate/classCount节数 -->
        
        <!--视频列表-->
        <div class="card_content_wrapper container">
            <ul class="loadMoreList" v-loading="isLoading">
                <li class="content_card_item" v-for="item in liveVideoList" :key="item.id">
                    <div class="cover">
                        <img style="width: 224px;height: 125px; border-radius: 3px" :src="item.cover[0] " alt="">
                        <img class="play_icon" src="https://rs.dance365.com/img/release_play@3x.fb313c4d.png" alt="">
                        <span class="subject_card">{{item.subjectTag}}</span>
                    </div>
                    <div class="moment_detail">
                        <div class="card_detail">
                            <span class="title">{{item.title}}</span>
                            <div class="viewCount isVipFreeCustom">
                                <div class="price">
                                    <div>
                                        <span style="font-size: 14px;">￥</span>
                                        {{item.moreBackup.price}}
                                    </div>
                                </div>
                                <span class="num">
                                 已报名: {{item.statisticsBackup.sellCount}}
                            </span>
                            </div>
                            <div class="interrelated_info  vip_free">
                                <!--<div class="vip_free_icon"> </div>-->
                                <span class="praiseCount">
                                    <span class="num_info">日期: {{time(item.moreBackup.startDate)}}~{{time(item.moreBackup.endDate)}}</span>
                                </span>
                                <span class="favoriteCount">
                                     <span class="num_info">节数:</span>
                                    <span class="num_info">{{item.statisticsBackup.sellCount}}</span>
                                </span>
                            </div>
                        </div>
                        <div class="creator_info">
                            <div class="info">
                                <img class="avatarClass" :src="item.creatorBackup.avatar" alt="">
                                <span class="creator_name" :title="item.creatorBackup.name">{{item.creatorBackup.name}}</span>
                                <img class="certified_icon" src="https://rs.dance365.com/authenticate_personal@3x.png" alt="">
                            </div>
                            <span class="uploadTime">{{time(item.createTime)}}</span>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="loadMore" @click="loadMoreClick">加载更多</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import videoCourseApi from "@/api/course/videoCourse";
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import SelectComponent from '../components/SelectComponent/index.vue';
const liveCourseList = ref<any>([]);
const isLoading = ref(false);
const index  = ref(0);
const allSortHandler = (ind:number) => {
    index.value = ind;
    pageNum.value = 3;
    getLiveVideoListAsync();
}
const countSortHandler = async (ind:number) => {
    index.value = ind;
    const res = await videoCourseApi.liveCourseSellCountDesc(pageSize.value, pageNum.value);
    liveVideoList.value = res.content;
}
const commentSortHandler = (ind:number) => {
    index.value = ind;
    pageNum.value = 5;
    getLiveVideoListAsync();
}
const viewSortHandler = async (ind:number) => {
    index.value = ind;
    const res = await videoCourseApi.liveCourseViewCountDesc(pageSize.value, pageNum.value);
    liveVideoList.value = res.content;
}
const timeSortHandler = async (ind:number) => {
    index.value = ind;
    const res = await videoCourseApi. liveCourseStartTimeAsc(pageSize.value, pageNum.value);
    liveVideoList.value = res.content;
}

// 重置按钮
// const isSHow = ref(false)





const value1 = ref('')
const value2 = ref('')

const defaultTime1 = new Date(2000, 1, 1, 12, 0, 0) // '12:00:00'
const defaultTime2: [Date, Date] = [
    new Date(2000, 1, 1, 12, 0, 0),
    new Date(2000, 2, 1, 8, 0, 0),
] // '12:00:00', '08:00:00'


const liveVideoList = ref<any>([])
const pageSize = ref(20);
const pageNum = ref(0)
const clickHandler = ($event:any) => {
    pageNum.value = $event;
    getLiveVideoListAsync();
}




const getLiveVideoListAsync = async () => {
    const res =  await videoCourseApi.getLiveVideoList(pageSize.value, pageNum.value);
    liveVideoList.value = res.content;
}

function time (time3:number){
    var date = new Date(time3);
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    return Y.slice(2) + M + D;
}



onMounted(() => {
    getLiveCourseListAsync();
    getLiveVideoListAsync();
    //绑定浏览器的滚动事件
    window.addEventListener('scroll', windowScroll);
})
const getLiveCourseListAsync = async () => {
    const res = await videoCourseApi.getLiveCourseList();
    liveCourseList.value = res;
}

// 按价格由高到低排序
const clickVideoCoursePriceDesc = async () =>  {
    const res = await videoCourseApi.liveVideoCoursePriceDesc(pageSize.value, pageNum.value);
    liveVideoList.value = res.content;
}
// 按价格有低到高排序
const clickVideoCourseAsc = async () => {
    const res = await videoCourseApi.liveVideoCoursePriceAsc(pageSize.value, pageNum.value);
    liveVideoList.value = res.content;

}

// 点击加载更多
const loadMoreClick = async () => {
    pageNum.value+=1;
    isLoading.value = true;
    const res =  await videoCourseApi.getLiveVideoList(pageSize.value, pageNum.value);
    isLoading.value = false;
    liveVideoList.value = liveVideoList.value.concat(res.content);
}


// 滚动条事件
const windowScroll = async () => {
    //获取操作元素最顶端到页面顶端的垂直距离
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // windowHeight是可视区的高度
    const windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
    // scrollHeight是滚动条的总高度
    const offsetHeight = document.documentElement.offsetHeight || document.body.offsetHeight;
    const scrollTops = offsetHeight - windowHeight;
    // 滚动条到底部
    if (scrollTop/(offsetHeight - windowHeight) >=1) {
        // 到了底部之后想做的操作,如到了底部之后加载
        isLoading.value = true;
        pageNum.value +=1;
        const res = await videoCourseApi.getVideoList(pageSize.value,pageNum.value);
        isLoading.value = false;
        res.content.forEach((item:any) => {
            liveVideoList.value.push(item);
        })
        window.removeEventListener('scroll', windowScroll)
    }
}


</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.bodys {
    background-color: #f5f7f9!important;
    overflow: hidden;
}
.container {
    width: 1200px;
    margin: 20px auto 20px;
}


.grid-content.ep-bg-purple.npm {
    margin-top: 8px;
}



/*课程分类start*/
.video_course {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    /*display: block;*/
    overflow: hidden;
    position: relative;
    border-radius: 3px;
}
.order-container {
    clear: both;
    height: 80px;
    margin: 10px auto 0;
    border-radius: 3px;
    background-color: #fff
}
.order-container .order-item {
    display: inline-block;
    font-size: 14px;
    color: #7d8090;
    cursor: pointer;
    margin-top: 32px;
}
.order-container .order-item:nth-child(1) {
    margin-left: 30px;
}
.order-container .order-item:not(:nth-child(1)){
    margin-left: 60px;
}
.order-item.price {
    position: relative;
}
.price-order {
    position: absolute;
    visibility: hidden;
    top: 520px;
    left: 550px;
    width: 100px;
    height: 90px;
    /*color: #fff;*/
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: #fff;
    box-shadow:1px 2px 3px 4px #ccc;
}
.price-order .menu-item {
    padding: 17px 0;
    text-align: center;
    font-size: 14px;
    color: #111;
    cursor: pointer;
    
}
.order-item.active {
    color: #ff4683;
}

/*视频*/
.card_content_wrapper {
    /*background-color: #099;*/
    margin-top: 20px;
    padding-bottom: 20px;
}
.loadMoreList {
    display: flex;
    flex-wrap: wrap
}
.card_content_wrapper .loadMoreList>.content_card_item:not(:nth-child(5n)) {
    margin-right: 20px;
}
.loadMoreList .content_card_item {
    width: 224px;
    background-color: #fff;
    margin-bottom: 20px;
    display: block;
    border-radius: 5px;
}
.content_card_item .cover {
    position: relative;
}
.content_card_item .cover .play_icon {
    position: absolute;
    bottom: 6px;
    left: 10px;
    display: inline-block;
    width: 30px;
    height: 30px;
}
.content_card_item .subject_card {
    position: absolute;
    color: #fff;
    right: 10px;
    bottom: 10px;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    padding: 0 10px;
    border-radius: 12px;
    background: rgba(0,0,0,.6);
}
.content_card_item .moment_detail {
    width: 100%;
    color: #b1b5c1;
    height: 155px;
}

.content_card_item .moment_detail .card_detail {
    display: flex;
    flex-direction: column;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 13px;
    border-bottom: 1px solid #ebeced;
    height: 104px;
}
.content_card_item .moment_detail .card_detail .title {
    font-size: 9px;
    color: #111;
    padding-top: 10px;
    padding-bottom: 0;
    line-height: 18px;
    height: 45px;
    width: 100%;
}
.content_card_item .moment_detail .card_detail .viewCount.isVipFreeCustom {
    /*margin-top: 20px;*/
    height: 32px;
    line-height: 22px;
    padding-bottom: 7px;
    display: flex;
    justify-content: space-between;
}
.content_card_item .moment_detail .card_detail .viewCount .price {
    color: #f93684;
    font-size: 16px;
    transform: translateY(-2px);
}
.interrelated_info  .vip_free {
    display: flex;
}
.interrelated_info .vip_free_icon {
    width: 38px;
    height: 14px;
    background-size: cover;
}
.num_info {
    width: 50px;
    font-size: 10px;
}
.favoriteCount {
    margin-left: 5px;
}
.favoriteCount .num_info {
    font-size: 10px;
}
.icon-card_love {
    width: 13px;
}
.creator_info {
    display: flex;
    justify-content: space-between;
}
.creator_info .info {
    display: flex;
    align-items: center;
    align-content: center;
}
.creator_info .info .avatarClass {
    width: 24px;
    height: 24px;
    margin-left: 10px;
    /*margin-top: 10px;*/
}
.creator_info .info .creator_name {
    display: inline-block;
    height: 20px;
    color: #111;
    cursor: pointer;
    font-size: 12px;
    margin-left: 8px;
    margin-top: 13px;
    max-width: 68px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.creator_info .info .certified_icon {
    margin-top: 8px;
    width: 12px;
    height: 12px;
}
.creator_info .uploadTime {
    margin-top: 12px;
    margin-right: 12px;
}
/*课程分类end*/


.loadMore {
    width: 140px;
    height: 40px;
    margin: 50px auto;
    font-size: 14px;
    color: #82858e;
    cursor: pointer;
    text-align: center;
    background-color: #fff;
    line-height: 40px;
    border-radius: 4px;
}


</style>